<template>
  <div>
    <div class="center-middle">
      <div style="color: #303133">
        您好,<span class="user-name">{{ admin.name }}</span>
        <h3>欢迎使用</h3>
        <h2>学生公寓管理系统</h2>
      </div>
      <div style="margin-left: 50px">
        <el-carousel style="width: 600px" indicator-position="outside">
          <el-carousel-item v-for="(item, index) in items" :key="index">
            <img :src="item.imgUrl" class="slide-image" style="width: 100%; height: 100%; object-fit: cover;" alt=""/>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="center-middle">
      <el-card style="width: 842px; box-shadow: none">
        <div style="font-size: 24px;margin-bottom: 15px">系统公告</div>
        <el-collapse accordion v-for="(item, index) in noticeRich">
          <el-collapse-item :name="index + ''">

            <template slot="title">
              <i style="color: #909399; font-size: 20px;" class="el-icon-document"></i>
              <div style="width: 600px">
                <span style="margin-left: 5px;font-size: 16px; color: #303133">{{ item.name }}</span>
              </div>


              <span style="margin-left: auto; font-size: 12px; ">{{ item.time }}</span>
            </template>
            <div>
              <div v-html="item.content"></div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      items: [
        {
          imgUrl: require('@/img/1 (1).jpg')
        },
        {
          imgUrl: require('@/img/1 (2).jpg')
        },
        {
          imgUrl: require('@/img/1 (3).jpg')
        },
        {
          imgUrl: require('@/img/1 (4).jpg')
        }
      ],

      noticeRich: [],
      admin: ''
    }
  },
  created() {
    let admin = JSON.parse(window.localStorage.getItem('dormitoryAdmin'))
    this.admin = admin
    this.$store.state.admin = admin

    const _this = this

    axios.get('http://localhost:9090/notices/type/2').then(function (res) {
      _this.noticeRich = res.data.data.splice(0, 5)
      console.log(_this.noticeRich);
    })
  }
}
</script>

<style scoped>

.center-middle {
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-name {
  padding-left: 5px;
  color: #409EFF;
}
</style>